<template>
    <div>
        <el-row :span="24">
            <el-col :span="6">
                <div class="drop-zone" :data-column="0">
                    <slot name="column-0"></slot>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="drop-zone" :data-column="1">
                    <slot name="column-1"></slot>
                </div>
                
            </el-col>
            <el-col :span="6">
                <div class="drop-zone" :data-column="2">
                    <slot name="column-2"></slot>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="drop-zone" :data-column="3">
                    <slot name="column-3"></slot>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script lang="ts" setup>
    import { reactive,ref,defineProps} from 'vue';
    import type { Component, PropType } from 'vue';
    // const gridColumns=reactive([
    //     {
    //         id:'col-'+1,
    //         columns:1,
    //         children:[]
    //     }
    // ])
    const props=defineProps({
        columns:{
            type:Array as PropType<Columns[]>, 
            required:true,
            default:()=>{
                [
                    { id: `col-0-${Date.now()}`, children: [] },
                    { id: `col-1-${Date.now()}`, children: [] },
                    { id: `col-2-${Date.now()}`, children: [] },
                    { id: `col-3-${Date.now()}`, children: [] },
                ]
            }
        }
    })
    console.log('-------Gridlayout--props',props.columns)
</script>
<style lang="scss" scoped>
.el-col{
    border:1px solid red;
}
.drop-zone{
    min-height:40px;
}
</style>